<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="http://101.43.223.224:8765/image/getImageById?id=6756" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					>
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="@/static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 中心 -->
		<view class="div1">
			<u-tabs :list="list1" :scrollable="false" @click="click($event, index)" style="width: 100%;"></u-tabs>
			<view v-show="activeIndex === 0">
				<!-- 待预约的内容 -->
				<view style="width: 100%;height: 2vh;"></view>
				<view style="width: 94%;height: 100%;margin: 0 auto;">
					<!--  -->
				<view style="width: 100%;"> 
					<view v-for="(item, index) in yourDataArray" style="margin-bottom: 10px;">
					<view  class="yy1" @click="goClassBooking(item)" >
							<view class="yy2">
								<view style="width: 2%;height: 100%;float: left;"></view>
								<view style="width: 10%;height: 100%;float: left;">
									<view style="width: 100%;height: 8%;"></view>
									<image src="@/static/日历.png" style="width: 20px;height: 20px;position: relative;top: 0px;left: 6px;margin-right: 8px;"/>
								</view>
								<view style="width: 50%;height: 100%;float: left;">
									<view style="width: 100%;height: 23%;"></view>
									<span style="font-size: 16px;font-weight: 400;margin-left: 16px;font-weight: bold;">{{ item.seriesName }}</span>
								</view>
							</view>
							<view class="yy3">
								<view style="width: 100%;height: 100%; display: flex; flex-direction: row; align-items: flex-start;">
									<view v-for="coach in MemberuserDate" :key="coach.coachId" style="padding-left: 10px; width: 35%; height: 80%; padding-top: 3.5%;">
										<image style="width: 45px; height:  45px; border-radius:50%; margin-top: 9px;margin-left: -3px;"  :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto" mode=""></image>
									</view>
									<view style="width: 65%; height: 10%; margin-top: 13px; margin-left:-8px;font-size: 12px; color: #666;line-height: 3vh;">
										<span >学员名称：{{studentName}}</span>
										 <span>系列：{{ item.planName }}</span> 
										<br />
										<span>教练名称：{{ item.coachName }}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					</view>
				<!--  -->
				</view>
			</view>
			<view v-show="activeIndex === 1">
				<!-- 待训练的内容 -->
				<view style="width: 100%;height: 2vh;"></view>
				<view style="width: 94%;height: 100%;margin: 0 auto;">
					<view v-for="(item, index) in trainedData" class="div4"
						style="height: 18vh;background: rgba(250, 250, 250, 0.5);margin-bottom: 2rpx;">
						<view class="div5">
							<view style="width: 2%;height: 100%;float: left;"></view>
							<view style="width: 10%;height: 100%;float: left;">
								<view style="width: 100%;height: 8%;"></view>
								<image src="@/static/日历.png" style="width: 20px;height: 20px;position: relative;top: 9px;left: 12px;margin-right: 8px;"/>
							</view>
							<view style="height: 100%;float: left;">
								<view style="width: 100%;height: 23%;"></view>
								<span
									style="font-size: 18px;font-weight: 400;margin-left: 3px;">{{ item.seriesName }}</span>
							</view>
							<span
								style="font-size: 15px;font-weight: 400;float: right;color: rgb(153, 160, 160);margin-top: 12px;margin-right: 8px;letter-spacing: 2px; ">预约时间:{{ item.reservationTime }}</span>
						</view>
						<view class="div6">
							<view
								style="width: 100%;height: 100%; display: flex; flex-direction: row; align-items: flex-start;">
								<view v-for="coach in MemberuserDate" :key="coach.coachId"
									style="padding-left: 10px; width: 35%; height: 80%; padding-top: 3.5%;">
									<image style="width: 160rpx; height: 160rpx; border-radius: 100%;"
										:src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto"
										mode=""></image>
								</view>
								<view style="width: 50%; height: 10%; padding-left: 6px; margin-top: 12px;line-height: 40px;color: #666;">
									<span style="font-size: 18px;float: left;">{{ item.planName }}</span>
									<br />
									<span
									style="font-size: 18px; float: left; line-height: 4vh;">教练名称：{{item.coachName}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view v-show="activeIndex === 2">
				<!-- 已完成的内容 -->
				<!-- <view style="width: 100%;height: 2vh;"></view>
				<view style="width: 94%;height: 100%;margin: 0 auto;">
					<view v-for="(item, index) in progressData" class="div4" @click="gocoursedetails(item)">
						<view class="div4">
							<view class="div5">
								<view style="width: 2%;height: 100%;float: left;"></view>
								<view style="width: 10%;height: 100%;float: left;">
									<view style="width: 100%;height: 8%;"></view>
									<u-icon name="calendar" size="35" color="black"></u-icon>
								</view>
								<view style="width: 50%;height: 100%;float: left;">
									<view style="width: 100%;height: 23%;"></view>
									<span
										style="font-size: 18px;font-weight: 400;margin-left: 5px;">{{ item.seriesName }}</span>
								</view>
							</view>
							<view class="div6">
								<view
									style="width: 100%;height: 100%; display: flex; flex-direction: row; align-items: flex-start;">
									<view v-for="coach in MemberuserDate" :key="coach.coachId"
										style="padding-left: 10px; width: 35%; height: 80%; padding-top: 3.5%;">
										<image style="width: 100%; height: 100%; border-radius: 5px;"
											:src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto"
											mode=""></image>
									</view>
									<view style="width: 35%; height: 10%; padding-left: 10px; margin-top: 10%;">
										<span style="font-size: 18px;">{{ item.planName }}</span>
										<br />
										<span
											style="font-size: 18px; width: 50%; line-height: 4vh;">教练名称：{{ item.coachName }}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				
				<view style="width: 94%;height: 100%;margin: 0 auto;" v-for="(item, i) in progressData" :key="i">
					<view  class="trigger-view" @click="showPopup(item.courseId)" style="width: 100%;height: 16vh;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;background-color: rgba(255,255,255,0.5);margin: 18rpx 0rpx;">
						<view style="width: 100%;height: 5vh;">
							<view style="width: 8%;height: 4vh;float: left;">
								<image  src="@/static/日历.png" style="width: 20px;height: 20px;position: relative;top: 5px;left: 6px;margin-right: 8px;"/>
							</view>
							<text style="float:left;margin-top: 2.5rpx;font-size: 20px;">{{ item.planName }}</text>
							<text style="float:left;margin-top: 7rpx;margin-left: 150rpx;">时间：{{ item.createTime | formatDate }}</text>
						</view>
						<view style="width: 100%;height: 11vh;">
							<view v-for="coach in MemberuserDate" :key="coach.coachId" style="width: 110rpx;height: 110rpx;border-radius: 110rpx;margin-left: 15rpx;background-color: aquamarine;float: left;">
								<image style="width: 110rpx;height: 110rpx;border-radius: 110rpx;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto" mode=""></image>
							</view>
							<text style="float: left;margin-top: 35rpx;margin-left: 30rpx;">
								学员名称：{{studentName}}
							</text>
							<text style="float: left;margin-top: 35rpx;margin-left: 100rpx;">
								教练名称：{{ item.coachName }}
							</text>
						</view>
					</view>
					<view :style="popupStyle" style="height: auto;margin-bottom: 10rpx;" v-show="showPopupView[item.courseId]" class="popup-view">
					    <view style="margin-top: 15rpx; width: 100%;height: auto;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;background-color: rgba(255,255,255,0.5);">
							<view style="width: 100%;height: 5vh;">
							  	<view style="width: 8%;height: 4vh;float: left;">
							  		<image  src="@/static/日历.png" style="width: 20px;height: 20px;position: relative;top: 5px;left: 6px;margin-right: 8px;"/>
							  	</view>
							  	<text style="float:left;margin-top: 2.5rpx;font-size: 20px;">{{ item.planName }}</text>
							  	<text style="float:left;margin-top: 7rpx;margin-left: 150rpx;">时间：{{ item.createTime | formatDate }}</text>
							</view>
							<view style="width: 100%;height: 11vh;">
								<view v-for="coach in MemberuserDate" :key="coach.coachId" style="width: 110rpx;height: 110rpx;border-radius: 110rpx;margin-left: 15rpx;background-color: aquamarine;float: left;">
									<image style="width: 110rpx;height: 110rpx;border-radius: 110rpx;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto" mode=""></image>
								</view>
								<text style="float: left;margin-top: 35rpx;margin-left: 30rpx;">
									学员名称：{{studentName}}
								</text>
								<text style="float: left;margin-top: 35rpx;margin-left: 100rpx;">
									教练名称：{{ item.coachName }}
								</text>
							</view>
							<view style="width: 100%;height: auto;display: flex;justify-content: center;" v-for="( items, index) in actionData" :key="index">
								<view style="width: 90%;height: auto;" >
									<view style="width: 100%;height: 5vh;"> 
										<text style="font-size: 13px;">
											名称：{{  items.fitnessActionName  }}
										</text>
										<text style="font-size: 13px;margin-left: 100rpx;">
											总重量：{{ calculateTotalSum(items) }}KG
										</text>
										<text style="font-size: 13px;margin-left: 30rpx;">
											简易难度：困难
										</text>
									</view>
									<view style="width: 100%;height: 5vh;" v-for="(i,index) in actionDatas" :key="index">
										<text style="font-size: 13px;">{{ index + 1 }}</text>
										<text style="font-size: 13px;margin-left: 100rpx;">{{ i.equipmentWeight }}kg 	*</text>
										<text style="font-size: 13px;">{{ items.countAction }}组</text>
										<text style="margin-left: 100rpx;">60秒</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height:16%;"></view> 
		</view>
		<!-- <view style="width: 100%;height: 8%;background-color: yellow;z-index: 999;">
			
		</view> -->
		<tabbar selected-index=1></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentName:'',//学员姓名
				showPopupView: {}, // 控制弹出视图的显示状态
				popupStyle: {}, // 弹出视图的样式
				value: '',
				type: 'text',
				border: true,
				// values: 'orange',
				// src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				// text: '无头像'
				list1: [{
					name: '待预约',
				}, {
					name: '待训练',
				}, {
					name: '已完成',
				}],
				activeIndex: 0,
				yourDataArray: [],
				MemberuserDate: [],
				trainedData: [],
				progressData: [],
				appointment: [],
				memberData: [],
				userId: 0,
				form: {},
				actionDatas:[],
				option: {},
				actionData: [],
				coachphoneData:[],
				partData:[]
			}
		},
		onShow() {
			this.load();
			this.trained();
			this.progress();
			this.memberload();
			this.Memberuserload();
		},
		onLoad(){
			uni.getStorage({  
			    key: 'userInfo',  
			    success: (res) => {  
			        // 成功读取后，将值设置到页面的 data 中  
			        this.studentName = res.data.memberUserRealName;  
			    },  
			    fail: () => {  
			        // 读取失败，可以设置一个默认值或进行其他处理  
			        console.log('读取存储失败');  
			        this.studentName = '默认值';  
			    },
			})
		},
		filters: {
		  formatDate(value) {
		    const date = new Date(value);
		    date.setHours(0, 0, 0, 0); // 设置时分秒为0
		    return date.toISOString().split('T')[0]; // 返回格式化后的日期，例如：2023-12-28
		  }
		},
		methods: {
			calculateTotalSum(items) {
			    if (items.actionCounts) {
			      let totalWeight = 0;
			      items.actionCounts.forEach((data) => {
			        totalWeight += data.equipmentWeight * items.countAction;
			      });
			      return totalWeight;
			    } else {
			      return 0;
			    }
			},
			// 课程安排查询
			part(courseId) {
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/course/part',
			        method: "GET",
			        data: {
						courseId: courseId
					},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 partData 数组
			                this.partData = res.data.data;
							this.selectAction()
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
				
			},
			// 查询动作组数
			selectAction() {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/selectActionByPlanTow',
					method: 'GET',
					data: {
						planId: this.partData[0].planId,
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.actionData = res.data.data.data;
							ths.actionDatas = res.data.data.data[0].actionCounts;
							console.log("===========",ths.actionDatas);
						} else {
							ths.actionData = []
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			showPopup(courseId) {
				// this.action()
				this.part(courseId)
				//将其他的关掉 ////////////////////////////////////////
				Object.keys(this.showPopupView).forEach(key => {  
					if(key != courseId){
						this.showPopupView[key] = false;  
					}
				});
			    this.showPopupView[courseId] = !this.showPopupView[courseId]; // 切换弹出视图的显示状态
			
			      if (this.showPopupView) {
			        // 设置弹出视图的样式，调整位置
			        const triggerViewRect = uni.createSelectorQuery().select('.trigger-view').boundingClientRect();
			        const popupViewRect = uni.createSelectorQuery().select('.popup-view').boundingClientRect();
			
			        Promise.all([triggerViewRect.exec(), popupViewRect.exec()]).then(([triggerViewRect, popupViewRect]) => {
			          const top = triggerViewRect[0].bottom;
			          const left = triggerViewRect[0].left;
			
			          this.popupStyle = {
			            top: `${top}px`,
			            left: `${left}px`
			          };
			        });
			      }
			    },
			cancellation() {
				uni.showModal({
					// title: '您确定要取消预约吗？',
					content: '您确定要取消预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮
							this.confirmCancellation();
						} else if (res.cancel) {
							// 用户点击了取消按钮
							// 这里可以添加取消操作的逻辑，或者不做任何操作
						}
					}
				});
			},
			Memberuserload() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/memberUser/selectMemberHeadPortrait',
					method: "GET",
					data: {
						userId: uni.getStorageSync('userInfo').id
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 Coacharray 数组
							this.MemberuserDate = res.data.data;
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			// 取消预约
			confirmCancellation() {
				this.courseId = this.trainedData[0].id
				this.Id = uni.getStorageSync('coach')
				this.userId = uni.getStorageSync('userInfo').id
				uni.request({
					url: 'http://127.0.0.1:17000/course/cancel?courseId=' + this.courseId + "&Id=" + this.Id +
						"&userId=" + this.userId,
					method: 'POST',
					dataType: 'json',
					data: {
						courseId: this.courseId,
						Id: this.Id,
						userId: this.userId,
					}, // 需要上传的数据
					success: (res) => {
						if (res.statusCode === 200) {
							// 请求成功，保存成功
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								duration: 2000,
								success: () => {
									this.load();
									this.trained();
								},
							});
							this.file = null
						} else {
							// 请求成功，但保存失败
							uni.showToast({
								title: '取消失败',
								icon: 'none',
								duration: 2000,
							});
						}
					},
					fail: (error) => {
						// 请求失败
						console.error('请求失败', error);
						uni.showToast({
							title: '提交失败',
							icon: 'none',
							duration: 2000,
						});
					},
				});
			},
			formatDate(date) {
				if (!date) return '';
				const options = {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				};
				return new Date(date).toLocaleDateString('zh-CN', options);
			},
			// 课程状态
			getStatusText(reservationStatus) {
				reservationStatus = parseInt(reservationStatus); // 将status转换为整数

				switch (reservationStatus) {
					case 0:
						return '预约';
					case 1:
						return '正在训练';
					case 2:
						return '已完成';
					default:
						return '未知状态';
				}
			},
			calculateTimeDifference(startTime, endTime) {
				// 确保 startTime 和 endTime 是有效的 JavaScript 日期对象或时间戳
				startTime = new Date(startTime);
				endTime = new Date(endTime);

				// 计算时间差（分钟）
				const timeDiffInMinutes = Math.floor((endTime - startTime) / (60 * 1000));

				if (timeDiffInMinutes >= 60) {
					// 超过一小时，计算小时和剩余分钟
					const hours = Math.floor(timeDiffInMinutes / 60);
					const remainingMinutes = timeDiffInMinutes % 60;

					if (remainingMinutes > 0) {
						return hours + " 小时 " + remainingMinutes + " 分";
					} else {
						return hours + " 小时";
					}
				} else {
					// 不足一小时，直接以分钟为单位显示
					return timeDiffInMinutes + " 分钟";
				}
			},
			load() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/course/all',
					method: "GET",
					data: {
						coachId: uni.getStorageSync('coach'),
						memberId: uni.getStorageSync('userInfo').id,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 yourDataArray 数组
							this.yourDataArray = res.data.data;
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			memberload() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/course/member',
					method: "GET",
					data: {
						phone: uni.getStorageSync('userInfo').memberUserPhone,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 yourDataArray 数组
							this.memberData = res.data.data;
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			trained() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/course/trained',
					method: "GET",
					data: {
						coachId: uni.getStorageSync('coach'),
						memberId: uni.getStorageSync('userInfo').id,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 yourDataArray 数组
							this.trainedData = res.data.data;
							console.log("-------------------")
							console.log(this.trainedData)
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
				uni.request({
					url: 'http://127.0.0.1:17000/course/appointmentID',
					method: "GET",
					data: {

					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 yourDataArray 数组
							this.appointment = res.data.data;
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			progress() {
				// 发起查询请求
				uni.request({
					url: 'http://127.0.0.1:17000/course/progress',
					method: "GET",
					data: {
						coachId: uni.getStorageSync('coach'),
						memberId: uni.getStorageSync('userInfo').id,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 将查询结果中的多个任务数据存储到 yourDataArray 数组
							this.progressData = res.data.data;
							 this.progressData.forEach(item => {  
							      // 将每个键对应的值设置为 false  
							       this.showPopupViews[item.courseId] = false;
							    });  
							console.log(this.progressData[0].courseId)
						} else {
							// 处理请求失败的情况
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						}
					},
					fail: (error) => {
						// 处理请求失败的情况
						console.log(error)
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			},
			// 点击跳转课程详情
			goClassDetail() {
				uni.navigateTo({
					url: '/pages/student/index/classDetail',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			// 点击跳转课程详细
			gocoursedetails(item) {
				uni.navigateTo({
					url: '/pages/student/index/coursedetails?row=' + JSON.stringify(item),
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			// 点击跳转课程预约
			goClassBooking(item) {
				// 假设item包含带训练的数据，你需要根据实际情况进行修改
				console.log(this.trainedData)
				if (this.trainedData.length !== 0) {
					// 如果带训练数据存在，提示用户
					uni.showModal({
						title: '提示',
						content: '您还有待训练的课程，请不要着急哦。',
						success: (res) => {
							if (res.confirm) {
								// 用户点击了确定按钮，不执行跳转操作
								console.log('用户取消了预约');
							} else if (res.cancel) {
								// 用户点击了取消按钮，执行跳转操作
								console.log('用户取消了预约');
							}
						},
					});
				} else {
					// 如果带训练数据不存在，直接执行跳转操作
					uni.navigateTo({
						url: '/pages/student/index/classBooking?row=' + JSON.stringify(item),
						animationType: 'slide-out-top',
						animationDuration: 200,
					});
				}
			},
			click(event) {
				console.log('index', event.index);
				this.activeIndex = event.index;
			}
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		 /* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover; /* 使背景图片覆盖整个页面 */
		overflow: auto;
		/* background-repeat:repeat-y; /* 根据y轴重复显示背景图片 */  
	}

	.u-tabs__wrapper__nav {
		justify-content: space-around;
		/* 这个是为了让代码块均匀分布 */
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 10px ;
		width: 95%;
		margin: 0 auto;
	}

	.u-tabs__wrapper__nav__line {
		left: 0;
		/* 这个是为了让元素恢复原位 */
	}

	.u-tabs__wrapper__nav__item {
		flex: 1;
		/* 经过查看源码得知，下划线之所以错位，是因为每一个子盒子加起来并没有撑满整个盒子，所以当下划线取定位的时候，就会发生错位，因为两个子盒子宽度无法沾满整个盒子，所以就需要flex：1来沾满盒子。 */
	}

	.div8 {
		width: 9%;
		height: 100%;
		/* background-color: green; */
		float: left;
	}

	.div7 {
		width: 100%;
		height: 50%;
		/* background-color: red; */
	}

	.div6 {
		width: 96%;
		height: 70%;
		border-radius: 9px;
		margin: 0 auto;
	}

	.div5 {
		width: 100%;
		height: 25%;
		/* background-color: yellow; */
	}

	.div4 {
		width: 100%;
		height: 21vh;
		border-radius: 6px;
		box-shadow: 0px 2px 10px #cbcaca;
		background-color: #F7F7F7;
	}

	.hd {
		overflow-x: auto;
		display: -webkit-box;
		-webkit-overflow-scrolling: touch;
		margin: 0.5rem 0.5rem
	}

	.zx {
		overflow: auto;
		/* display: -webkit-box; */
		-webkit-overflow-scrolling: touch;
		margin: 0.5rem 0.5rem
	}

	.div1 {
		width: 100%;
		height: 86%;
	}

	.img1 {
		width: 100%;
		height: 100%;
	}

	.top {
		padding-top: 30px;
	}

	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/*待预约*/
	.yy1{
		width: 45%;
		height: 14vh;
		border-radius: 6px;
		box-shadow: 0px 1px 4px #c0c0c0;
		background: linear-gradient(to right, rgba(178,243,247, 0.5), rgba(255, 255, 255, 0.5)); 
		float: left;
		margin: 0px 8.5px 10px 8.5px;
	}
	.yy2{
		margin-top: 5px;
	}
</style>